<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue中使用组件的三大步骤：
            1.定义组件(创建组件)
                const school = Vue.extend(options)  其中options和new Vue(options)时传入的那个options几乎一样
                命名:
                    一个单词:小写或者首字母大写
                    多个单词:小写用短横线连起来 或者 单词首字母大写
                但区别如下：
                    1.el不要写，为什么？ ——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
                    2.data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系。

                使用template可以配置组件结构
            2.注册组件
                1.局部注册：靠new Vue的时候传入components选项
                2.全局注册：靠Vue.component('组件名'，组件）
            3.使用组件（写组件标签）


            简写:const com = {option}
     -->
    <div id="app">
        <!-- 3.使用组件 -->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <hello></hello>
        <qq></qq>
    </div>


    <script>
        // 1.创建一个组件
        const school = Vue.extend({
            template:
                `<div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="hi">你好北大</button>
                </div>`,
            data() {
                return {
                    schoolName: '北京大学',
                    address: '北京'
                };
            },
            methods: {
                hi(){
                    alert('你好北大')
                }
            },
        })
        const student = Vue.extend({
            template:
                `<div>
                    <h2>学生名称：{{studentName}}</h2>
                    <h2>年龄：{{age}}</h2>
                </div>`,
            data() {
                return {
                    studentName: '张三',
                    age: 20
                };
            },
        })
        const hello = Vue.extend({
            template:
                `<div>
                    <h2>{{msg}}</h2>
                </div>`,
            data() {
                return {
                    msg: 'hello vue'
                };
            },
        })
        
        const qq = {
            name: 'qq',
            template: `<div>{{msg}}</div>`,
            data() {
                return {
                    msg: 'hello qq'
                }
            }
        }
        //2全局注册组件
        Vue.component('hello', hello)
        const vm = new Vue({
            el:"#app",
            //2.注册组件
            components:{
                school,
                student,
                qq
            }

        })
    </script>
</body>
</html>